import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, List, Provider, Radio, Toast, Modal} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import {getParkingPlanPackageByItemID, setParkingPackage} from '~/api/parking';

import {saveParkOrder} from '~/store/parkorder';

const RadioItem = Radio.RadioItem;
class ChangeGift extends Component {
    static navigationOptions = {
        title: '更换套餐',
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            parkingplanitemid: this.props.navigation.getParam('parkingplanitemid'),
            packageorderid: this.props.navigation.getParam('packageorderid'),
            parkorderid: this.props.navigation.getParam('parkorderid'),
            orderName: '',
            list: [],
            checked: false,
        };
        this.getProjectList();
    }

    getProjectList = () => {
        getParkingPlanPackageByItemID(this.state.parkingplanitemid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data,
                    part1Value: 0,
                });
            } else {
                Alert.alert(r.msg + '222');
            }
        });
    };
    render() {
        const onpress = () => {
            Modal.alert('提示', '确认更换套餐？', [
                {
                    text: '取消',
                },
                {
                    text: '确定',
                    onPress: () => {
                        setParkingPackage({
                            order_id: this.state.parkorderid,
                            package_id: this.state.packageorderid,
                        }).then((r) => {
                            if (r.code === 0) {
                                this.props.navigation.goBack();
                                this.props.navigation.state.params.refresh();
                            } else {
                                Toast.info(r.msg, 1);
                            }
                        });
                    },
                },
            ]);
        };
        return (
            <View style={{width: '92%', marginRight: '4%', marginLeft: '4%', height: '100%', borderRadius: 10}}>
                <View style={{width: '100%', height: '85%', borderRadius: 10, marginBottom: 10}}>
                    <Flex style={{marginTop: 14.5, marginBottom: 10, paddingLeft: '2%', paddingRight: '2%'}}>
                        <Image style={{width: 4, height: 14}} source={require('~/assets/public/tupic.png')} />
                        <Text style={{fontSize: 16, paddingLeft: 3}}>选择赠品套餐</Text>
                    </Flex>
                    <View style={{width: '100%', height: 2, borderBottomWidth: 1.5, borderColor: '#f5f5f5'}} />
                    <ScrollView>
                        <View style={{width: '100%', borderRadius: 10}}>
                            {this.state.list.map((item) => {
                                return (
                                    <View style={{width: '100%', height: 95, borderWidth: 0.5, borderColor: '#F8F8FF'}}>
                                        <Flex
                                            onPress={() => {
                                                this.props.navigation.push('GiftList', {
                                                    params: item.OrderDataID,
                                                });
                                            }}
                                            style={{width: '100%', backgroundColor: 'white'}}>
                                            <View style={{paddingRight: 20, width: '30%', padding: 10}}>
                                                <Image
                                                    style={{width: '100%', height: 75, aspectRatio: 1 / 1}}
                                                    source={require('~/assets/public/packagegift.png')}
                                                />
                                            </View>
                                            <Flex style={{width: '70%', paddingRight: 15, marginTop: 20, marginBottom: 15}} justify={'between'}>
                                                <View style={{width: '85%'}}>
                                                    <Flex>
                                                        <Text style={{fontSize: 15, fontWeight: 'bold'}}>{item.PackageName}</Text>
                                                        <Text style={{borderRightWidth: 1, width: 2, height: 15, marginLeft: 5, marginRight: 5}} />
                                                        <Text style={{fontSize: 15, color: '#ec4f46'}}>{item.PriceMarketTotal}元</Text>
                                                    </Flex>
                                                    <Text numberOfLines={2} style={{color: 'gray', fontSize: 10}}>
                                                        冰箱，洗衣机，空调，电视机，茶几阿斯利康解放拉萨的解放拉萨的解放拉萨的a
                                                    </Text>
                                                </View>
                                                <Flex style={{width: '15%', paddingLeft: 5, height: 20}}>
                                                    {this.state.packageorderid === item.OrderDataID ? (
                                                        <RadioItem
                                                            style={{
                                                                width: 20,
                                                                height: 20,
                                                                borderWidth: 1,
                                                                borderRadius: 10,
                                                                borderColor: '#EC4F46',
                                                                backgroundColor: '#EC4F46',
                                                            }}
                                                            onChange={(event) => {
                                                                if (event.target.checked) {
                                                                    this.setState({
                                                                        packageorderid: item.OrderDataID,
                                                                        orderName: item.PackageName,
                                                                    });
                                                                }
                                                            }}
                                                        />
                                                    ) : (
                                                        <RadioItem
                                                            style={{
                                                                borderWidth: 1,
                                                                borderRadius: 10,
                                                                borderColor: '#999999',
                                                                width: 20,
                                                                height: 20,
                                                            }}
                                                            onChange={(event) => {
                                                                if (event.target.checked) {
                                                                    this.setState({
                                                                        packageorderid: item.OrderDataID,
                                                                        orderName: item.PackageName,
                                                                    });
                                                                }
                                                            }}
                                                        />
                                                    )}
                                                </Flex>
                                            </Flex>
                                        </Flex>
                                    </View>
                                );
                            })}
                        </View>
                    </ScrollView>
                </View>
                <Flex style={{width: '100%', height: '15%', paddingBottom: 10}} justify={'end'} align={'end'}>
                    <Text
                        onPress={onpress}
                        style={{
                            color: 'white',
                            fontSize: 20,
                            textAlign: 'center',
                            backgroundColor: '#EC4F46',
                            height: 40,
                            borderRadius: 5,
                            paddingTop: 7,
                            width: '100%',
                        }}>
                        更换套餐
                    </Text>
                </Flex>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        marginBottom: 20,
    },
    button1: {
        marginBottom: 20,
        backgroundColor: 'green',
    },
    images: {
        width: 100,
        height: 100,
        marginTop: 10,
    },
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 2,
    },
});
export default ChangeGift;
